<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合实例</title>
</head>

<body>
    <form action="#" method="POST">
        <fieldset>
            <legend>表单的综合实例挑战</legend>
            <label for="xm">姓名</label>
            <input type="text" name="xm" placeholder="汪守斌" maxlength="4">
            <br>
            <br>
            <label for="emailBox">邮箱</label>
            <input type="email" name="emailBox">
            <br>
            <br>
            <label for="telephone">电话号码</label>
            <input type="tel" name="telephone">
            <br>
            <br>
            <label for="psw">密码</label>
            <input type="password" name="psw">
            <br>
            <br>
            <label for="xb">男</label>
            <input type="radio" name="xb" checked>
            <label for="xb">女</label>
            <input type="radio" name="xb">
            <br>
            <br>
            <label for="sheng">省（市）</label>
            <select name="sheng" id="" multiple="multiple">
                <option value="">北京</option>
                <option value="">上海</option>
                <option value="" selected>河南</option>
                <option value="">湖北</option>
                <option value="">山东</option>
            </select>
            <label for="shi">市（区）</label>
            <select name="shi" id="">
                <optgroup label="北京">
                    <option value="">东城区</option>
                    <option value="">西城区</option>
                    <option value="">丰台区</option>
                    <option value="">朝阳区</option>
                </optgroup>
                <optgroup label="上海">
                    <option value="">黄浦区</option>
                    <option value="">静安区</option>
                    <option value="">徐汇区</option>
                    <option value="">长宁区</option>
                </optgroup>
                <optgroup label="河南">
                    <option value="" selected>郑州市</option>
                    <option value="">洛阳市</option>
                    <option value="">开封市</option>
                    <option value="">许昌市</option>
                    <option value="">信阳市</option>
                    <option value="">新乡市</option>
                </optgroup>
            </select>
            <br>
            <p>我的爱好有以下几种（多选）</p>
            <input type="checkbox">
            <label for="aihao">美食</label>
            <input type="checkbox">
            <label for="aihao">唱歌</label>
            <input type="checkbox">
            <label for="aihao">看电影</label>
            <input type="checkbox">
            <label for="aihao">练太极</label>
            <input type="checkbox">
            <label for="aihao">刷抖音</label>
            <p>用一段简明的文字描述一下自己的领导能力</p>
            <textarea name="pro" id="" cols="60" rows="10" placeholder="say something..."></textarea>
            <br>
            <label for="myColor">我最喜欢的颜色是什么？</label>
            <input type="text" name="myColor" list="suggestion">
            <datalist id="suggestion">
                <option value="">Black</option>
                <option value="">Cyan</option>
                <option value="">Pink</option>
                <option value="">Blue</option>
                <option value="">Yellow</option>
            </datalist>
            <br>
            <br>
            <!-- 文件上传框 -->
            <p>请上传你的简历</p>
            <input type="file">
            <input type="submit">
            <br>
            <br>
            <label for="btn">我是一个普通按钮</label>
            <input type="button" value="普通按钮">
            <br>
            <br>
            <label for="imgBTN">我和一个图片按钮</label>
            <input type="img" name="imgBTN" src="./">
        </fieldset>
    </form>
</body>

</html>